<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .search-section {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            align-items: center;
        }
        select, button {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        select {
            flex: 1;
            max-width: 300px;
        }
        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
            border: none;
        }
        button:hover {
            background-color: #0056b3;
        }
        .weather-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .info-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border-left: 4px solid #007bff;
        }
        .info-card h3 {
            margin-top: 0;
            color: #333;
        }
        .info-item {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }
        .info-label {
            font-weight: bold;
            color: #555;
        }
        .info-value {
            color: #007bff;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .error {
            color: #dc3545;
            text-align: center;
            padding: 20px;
        }
        .hourly-weather {
            margin-top: 20px;
        }
        .hourly-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        .hour-item {
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>🌤️ 天气查询系统</h1>
    </div>

    <div class="search-section">
        <select id="citySelect">
            <option value="">请选择城市</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="杭州">杭州</option>
            <option value="南京">南京</option>
            <option value="成都">成都</option>
            <option value="武汉">武汉</option>
            <option value="西安">西安</option>
            <option value="重庆">重庆</option>
        </select>
        <button id="searchBtn">查询天气</button>
    </div>

    <div id="loading" class="loading" style="display: none;">
        正在查询天气信息...
    </div>

    <div id="error" class="error" style="display: none;"></div>

    <div id="weatherResult" style="display: none;">
        <div class="weather-info">
            <div class="info-card">
                <h3>基本信息</h3>
                <div class="info-item">
                    <span class="info-label">城市:</span>
                    <span id="city" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">日期:</span>
                    <span id="date" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">星期:</span>
                    <span id="week" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">更新时间:</span>
                    <span id="update_time" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>当前天气</h3>
                <div class="info-item">
                    <span class="info-label">天气状况:</span>
                    <span id="wea" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">温度:</span>
                    <span id="tem" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">湿度:</span>
                    <span id="humidity" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">能见度:</span>
                    <span id="visibility" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>风力信息</h3>
                <div class="info-item">
                    <span class="info-label">风向:</span>
                    <span id="win" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">风速:</span>
                    <span id="win_speed" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">风力:</span>
                    <span id="win_meter" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>温度范围</h3>
                <div class="info-item">
                    <span class="info-label">最高温度:</span>
                    <span id="tem1" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">最低温度:</span>
                    <span id="tem2" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>空气质量</h3>
                <div class="info-item">
                    <span class="info-label">空气质量:</span>
                    <span id="air_level" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">AQI:</span>
                    <span id="air" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">PM2.5:</span>
                    <span id="air_pm25" class="info-value"></span>
                </div>
            </div>

            <div class="info-card">
                <h3>日出日落</h3>
                <div class="info-item">
                    <span class="info-label">日出:</span>
                    <span id="sunrise" class="info-value"></span>
                </div>
                <div class="info-item">
                    <span class="info-label">日落:</span>
                    <span id="sunset" class="info-value"></span>
                </div>
            </div>
        </div>

        <div class="hourly-weather">
            <h3>小时天气预报</h3>
            <div id="hourlyWeather" class="hourly-grid"></div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const citySelect = document.getElementById('citySelect');
        const searchBtn = document.getElementById('searchBtn');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');
        const weatherResult = document.getElementById('weatherResult');

        searchBtn.addEventListener('click', searchWeather);

        async function searchWeather() {
            const city = citySelect.value;
            if (!city) {
                showError('请选择一个城市');
                return;
            }

            showLoading();

            try {
                const response = await fetch(`/weather?city=${encodeURIComponent(city)}`);
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }

                const result = await response.json();
                if (result.code === 1) {
                    // 添加数据有效性检查
                    if (result.data) {
                        displayWeather(result.data);
                    } else {
                        showError('未获取到天气数据');
                    }
                } else {
                    showError(result.msg || '查询失败');
                }
            } catch (err) {
                showError('查询天气信息时发生错误: ' + err.message);
            }
        }

        function displayWeather(weather) {
            // 添加空值检查
            if (!weather) {
                showError('未获取到天气数据');
                return;
            }

            hideLoading();
            hideError();

            // 基本信息 - 添加安全访问
            document.getElementById('city').textContent = weather.city || '--';
            document.getElementById('date').textContent = weather.date || '--';
            document.getElementById('week').textContent = weather.week || '--';
            document.getElementById('update_time').textContent = weather.update_time || '--';

            // 当前天气
            document.getElementById('wea').textContent = weather.wea || '--';
            document.getElementById('tem').textContent = (weather.tem ? weather.tem + '°C' : '--');
            document.getElementById('humidity').textContent = weather.humidity || '--';
            document.getElementById('visibility').textContent = weather.visibility || '--';

            // 风力信息
            document.getElementById('win').textContent = weather.win || '--';
            document.getElementById('win_speed').textContent = weather.win_speed || '--';
            document.getElementById('win_meter').textContent = weather.win_meter || '--';

            // 温度范围
            document.getElementById('tem1').textContent = (weather.tem1 ? weather.tem1 + '°C' : '--');
            document.getElementById('tem2').textContent = (weather.tem2 ? weather.tem2 + '°C' : '--');

            // 空气质量
            document.getElementById('air_level').textContent = weather.air_level || '--';
            document.getElementById('air').textContent = weather.air || '--';
            document.getElementById('air_pm25').textContent = weather.air_pm25 || '--';

            // 日出日落
            document.getElementById('sunrise').textContent = weather.sunrise || '--';
            document.getElementById('sunset').textContent = weather.sunset || '--';

            // 小时天气预报
            displayHourlyWeather(weather.hours);

            weatherResult.style.display = 'block';
        }

        function displayHourlyWeather(hours) {
            const hourlyContainer = document.getElementById('hourlyWeather');
            hourlyContainer.innerHTML = '';

            if (hours && hours.length > 0) {
                hours.slice(0, 12).forEach(hour => {
                    const hourItem = document.createElement('div');
                    hourItem.className = 'hour-item';
                    hourItem.innerHTML = `
                            <div><strong>${hour.hours}</strong></div>
                            <div>${hour.wea}</div>
                            <div>${hour.tem}°C</div>
                            <div>${hour.win}</div>
                        `;
                    hourlyContainer.appendChild(hourItem);
                });
            } else {
                hourlyContainer.innerHTML = '<div>暂无小时天气预报数据</div>';
            }
        }

        function showLoading() {
            loading.style.display = 'block';
            weatherResult.style.display = 'none';
            hideError();
        }

        function hideLoading() {
            loading.style.display = 'none';
        }

        function showError(message) {
            hideLoading();
            error.textContent = message;
            error.style.display = 'block';
            weatherResult.style.display = 'none';
        }

        function hideError() {
            error.style.display = 'none';
        }
    });
</script>
</body>
</html>